<template>
	<view class="canvas-wrap">
		<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
		<button type="default" @click="preview">预览</button>
	</view>
</template>

<script>
	export default{
		onReady: function (e) {
		        var context = uni.createCanvasContext('firstCanvas')
		
		        context.setStrokeStyle("#00ff00")
		        context.setLineWidth(5)
		        context.rect(0, 0, 200, 200)
		        context.stroke()
		        context.setStrokeStyle("#ff0000")
		        context.setLineWidth(2)
		        context.moveTo(160, 100)
		        context.arc(100, 100, 60, 0, 2 * Math.PI, true)
		        context.moveTo(140, 100)
		        context.arc(100, 100, 40, 0, Math.PI, false)
		        context.moveTo(85, 80)
		        context.arc(80, 80, 5, 0, 2 * Math.PI, true)
		        context.moveTo(125, 80)
		        context.arc(120, 80, 5, 0, 2 * Math.PI, true)
		        context.stroke()
		        context.draw()
		    },
			
			methods:{
				preview() {
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: 300,
						height: 200,
						destWidth: 300,
						destHeight: 200,
						canvasId: 'firstCanvas',
						success: function(res) {
							// 在H5平台下，tempFilePath 为 base64
							console.log(res)
							console.log(res.tempFilePath)
							
							uni.previewImage({
								urls:[ res.tempFilePath ]
							})
						}
					})
				}
			}
	}
</script>

<style>
</style>
